<template>
	<view class="bgcolor">
		<view class="search">
			<input type="text" @click="tosearsch"  placeholder="请输入书名">
			<image  @click="tosearsch" src="@/static/search.png"></image>
		</view>
		<view class="headerTab" v-if="hederType.data">
			<view v-for="item,i in hederType.data" :key="item.id">
				<text :class="indexss==i?'textactive':''" @click="changeType(i,item.id)">{{ item.name }}</text>
			</view>
		</view>
		<view v-if="isShow">
			<JingXuan></JingXuan>
		</view>
		<view v-else>
			<view class="loading"></view>
		</view>
	</view>
</template>
<script setup>
	import {
		useStore
	} from 'vuex'
	import {
		defineComponent,
		reactive,
		ref
	} from "vue";
	import JingXuan from '@/commpent/jingxuan/JingXuan.vue'
	import {
		getHomeListType,
		getDatas
	} from '@/api/api.js'
	import {selecttheme} from '@/api/users.js'
	let indexss = ref(0)
	let store = useStore()
	defineComponent({
		components: {
			JingXuan
		}
	})

	const tosearsch = ()=>{
		uni.navigateTo({
			url:'/pages/search/search'
		})
	}
	
	let hederType = reactive({
		data: null
	})
	let isShow = ref(true)
	//初始化头部导航栏
	getHomeListType().then(res => {
		hederType.data = res.data.data
		store.commit('updatename', hederType.data[0].name)
		//初始化页面所有数据
		getDatas(hederType.data[0].id).then((res) => {
			let resdata = JSON.parse(res.data.data[0].data)
			store.commit('updateDatas', resdata)
		}).catch((er) => {
			uni.showToast({
				title: '网络太差了',
				icon: "error"
			});
		})
	}).catch(err => {
		uni.showToast({
			title: '网络太差了',
			icon: "error"
		});
	})
	let numsss = 0
	let changeType = (index, id) => {
		if(numsss==index){
			return
		}
		numsss = index
		isShow.value = false
		indexss.value = index
		getDatas(id).then((res) => {
			let resdata = JSON.parse(res.data.data[0].data)
			store.commit('updateDatas', resdata)
			isShow.value = true
		}).catch(err=>{
			console.log(err);
		})
	}
	let usersid = store?.state?.users?.id
	if(usersid){
		selecttheme(usersid).then((res)=>{
			let theme = res.data.data[0]
			let ss = {}
			ss.textcolor = theme.textcolor,
			ss.bgcolor=  theme.bgcolor,
			ss.size=  theme.size
			store.commit('updatetheme',ss)
		})
	}
	
</script>

<style lang="scss" scoped>
	.search {
		display: flex;
		flex-wrap: nowrap;
		margin: 25rpx;
		height: 90rpx;
		width: 700rpx;
		align-items: center;

		input {
			width: 700rpx;
			background-color: #ffffff;
			height: 90rpx;
			box-shadow: 5rpx 5rpx 10rpx 10rpx #f8f8f8;
			padding-left: 20rpx;
			box-sizing: border-box;
			flex-shrink: 0;
			border-radius: 15rpx;
		}

		image {
			flex-shrink: 0;
			width: 70rpx;
			height: 70rpx;
			position: relative;
			left: -110rpx;
			top: 0;
		}
	}

	.headerTab {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;


		>view {
			padding: 10rpx 20rpx;
			color: $color1;
			font-size: 28rpx;

		}
	}

	.bgcolor {
		background-color: $bgcolor;
	}

	.textactive {
		color: $color2;
		font-size: 35rpx;
		font-weight: 600;

	}

	.textactive::after {
		content: '';
		width: 25rpx;
		height: 5rpx;
		display: block;
		background-color: red;
		margin: 0 auto;
		margin-top: 5rpx;
	}

	@keyframes zhuanquan {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading {
		width: 100rpx;
		height: 100rpx;
		border: 4rpx solid #f8f8f8;
		border-left: 4rpx solid #ff5500;
		border-radius: 50%;
		animation: zhuanquan 2s infinite;
		margin: 50% auto;
		
	}
</style>
